<template>
    <div class="staff">
        
        <!-- 存放搜索框 -->
        <el-header>    
            <div class="staff-header">
                <!-- form搜索区域 -->
                <el-form :inline="true" :model="staffForm" class="staff-form">
                    <el-form-item>
                        <!-- <el-input placeholder="请输入名称" v-model="staffForm.name"> -->
                        <el-input placeholder="请输入员工姓名" v-model="name"
                            @keyup.enter.native="onSubmit">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入部门名称" v-model="dname"
                            @keyup.enter.native="onSubmit">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入工区名称" v-model="wname"
                            @keyup.enter.native="onSubmit">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入状态" v-model="sstatus"
                            @keyup.enter.native="onSubmit">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-row>
                            <el-button type="primary" @click="onSubmit">查询</el-button>

                            <el-button type="info" @click="resetParam">重置</el-button>
                        </el-row>
                    </el-form-item>
                </el-form>
            </div>
        </el-header>

        <el-main>
            <!-- 存放说明信息，批量删除 -->
            <div>
                <el-row type="flex" class="row-bg">
                    <el-col :span="6"><div class="grid-content bg-purple">出勤信息列表</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">共<span style="color: rgb(17, 101, 101);">{{total}}</span>条记录</div></el-col>
                    <!-- <el-col :span="6"><div class="grid-content bg-purple">共a条记录</div></el-col> -->
                </el-row>
            </div>
            <div class="common-table">
                <!-- 存放表格 -->
                <el-table
                    stripe
                    :data="tableData"
                    style="width: 100">
                    <el-table-column
                        prop="sid"
                        label="ID"
                        width="100%">
                    </el-table-column>
                    <el-table-column
                        prop="sname"
                        label="姓名">
                    </el-table-column>
                    <el-table-column
                        prop="dname"
                        label="部门">
                    </el-table-column>
                    <el-table-column
                        prop="wname"
                        label="工区">
                    </el-table-column>
                    <el-table-column
                        prop="sstatus"
                        label="状态"
                        :formatter="formatStatus">
                    </el-table-column>
                    <el-table-column
                        prop="sattend"
                        label="出勤状况"
                        >
                        <template slot-scope="scope">
                            <div v-html="formattedTableData[scope.$index]"></div>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 存放页码及跳转 -->
                <div class="pager">
                    <el-row type="flex" class="row-bg" justify="center">
                        <!-- 设置background属性可以为分页按钮添加背景色。 -->
                        <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :current-page="pageNum"
                        :current-size="pageSize"
                        @current-change="handlePage">
                        </el-pagination>
                    </el-row>

                    <!-- 主页按钮 -->
                    <div>
                        <el-button icon="el-icon-s-home" circle @click="goSystemHome"></el-button>
                    </div>
                </div>
            </div>
        </el-main>

    </div>
</template>
<script>
    export default{
        data() {
            return {
                dialogVisible: false,
                form: {
                    sid: '',
                    sname: '',
                    dname: '',
                    did: '',
                    wid: '',
                    wname: '',
                    sstatus: '',
                    sattend: ''
                },
                name:'',
                dname: '', // 部门名称搜索字段
                wname: '', // 工区名称搜索字段
                sstatus: '',
                tableData: [],
                deptData: [],
                workareaData: [],
                statusData: [
                    { id:1, value: '正常', label: '正常' },    
                    { id:2, value: '请假', label: '请假' },    
                    { id:3, value: '缺勤', label: '缺勤' },
                    { id:3, value: '迟到', label: '迟到' }    
                ],
                total: 0, //当前的总条数
                pageNum: 1,
                pageSize: 10,
                staffForm: {
                    name: '',
                    dname: '',
                    wname: '',
                    sstatus: ''
                },
            }
        },
        methods: {
            formatStatus(row) {
                switch (row.sstatus) {
                    case '正常':
                        return <span class="status-normal">正常</span>;
                    case '请假':
                        return <span class="status-leave">请假</span>;
                    case '缺勤':
                        return <span class="status-absent">缺勤</span>;
                    case '迟到':
                        return <span class="status-late">迟到</span>;
                    default:
                        return row.sstatus;
                }
            },

           goSystemHome(){
                this.$router.push('/systemHome')
                this.$message({
                    showClose: true,
                    message: '成功返回后台首页',
                    type: 'success'
                });
            },

            // 获取列表的数据
            loadPost(){
                this.$axios.post(this.$httpUrl+'/staff/getStaff',{
                    pageSize:this.pageSize,
                    pageNum:this.pageNum,
                    param:{
                        name:this.name,
                        dname: this.dname,
                        wname: this.wname,
                        sstatus: this.sstatus
                    }
                }).then(res=>res.data).then(res=>{
                    console.log(res)
                    if(res.code==200){
                        this.tableData=res.data
                        this.total=res.total
                    }else{
                        alert('获取数据失败')
                    }

                }),
                this.$axios.get(this.$httpUrl+'/dept/list').then(res=>{
                    console.log(res)
                        this.deptData=res.data
                }),
                this.$axios.get(this.$httpUrl+'/workarea/list').then(res=>{
                    console.log(res)
                        this.workareaData=res.data

                })
            },
            // 选择页码的回调函数
            handlePage(val) {
                console.log(`当前页: ${val}`);
                this.pageNum=val
                this.loadPost()
            },
            // 列表的查询
            onSubmit() {
                this.pageNum = 1
                this.loadPost()
            },
            resetParam(){
                this.name=''
                this.dname=''
                this.wname=''
                this.sstatus=''
                this.loadPost()
            },
        },
        mounted () {
            this.loadPost()
        },
        computed: {
            formattedTableData() {
            return this.tableData.map(row => {
                const statusCounts = { '1': 0, '2': 0, '3': 0, '4': 0 };
                const statusLabels = {
                    '1': '正常',
                    '2': '迟到',
                    '3': '缺勤',
                    '4': '请假'
                };

                // 计算每种状态的数量
                for (let i = 0; i < row.sattend.length; i++) {
                    statusCounts[row.sattend[i]]++;
                }

                let statusHtml = '';

                // 显示每种状态以及其数量
                for (const [status, count] of Object.entries(statusCounts)) {
                    const label = statusLabels[status];
                    statusHtml += `<span class="status-${label.toLowerCase()}">${label}<span style="color: blue;">${count}</span>天</span>, `;
                }

                // 去除末尾的逗号和空格
                return statusHtml.slice(0, -2);
            });
        }
    },
    }
    
</script>

<style lang="less" scoped>
.staff {
    height: 90%;
    .staff-header {
        display: flex;
        justify-content: end;
        // align-items: center;
        align-items: center;
        
    }
    .common-table {
        position: relative;
        height: calc(100% - 62px);
        .pager {
            bottom: 0;
            margin-top: 20px;   
        }
    }
    
    .status-normal {
        color: green; // 正常状态的示例颜色
        font-weight: bold; // 正常状态的示例字体加粗
    }
    .status-leave {
        color: orange; // 请假状态的示例颜色
        font-style: italic; // 请假状态的示例字体样式
    }
    .status-absent {
        color: red; // 缺勤状态的示例颜色
        text-decoration: line-through; // 缺勤状态的示例文本装饰
    }
    .status-late {
        color: blue; // 缺勤状态的示例颜色
        text-decoration: line-through; // 缺勤状态的示例文本装饰
    }

}

</style>
